<template>
    <view>
        <view class="register-title">
            个性签名
        </view>
        <view class="register-tip">
            有趣的个性签名能让更多人认识你
        </view>
        <view class="input-box">
            <van-field v-model="state.Intro" rows="5" autosize type="textarea" placeholder="请输入个性签名" />
            <view class="font-number">{{ state.Intro.length }}/200</view>
        </view>
        <view class="register-title">
            社交账号
        </view>
        <view class="input-box">
            <van-field v-model="state.Wx" autosize type="text" placeholder="请填写你的微信号" />
        </view>
        <view class="register-title">
            邀请码
        </view>
        <view class="register-tip">
            填写好友邀请码获取奖励
        </view>
        <view class="input-box">
            <van-field v-model="state.InviteCode" autosize type="text" placeholder="请输入邀请码" />
        </view>
    </view>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from "vue"
const emits = defineEmits(["update:personalSignatureFn"])

const state = reactive({
    InviteCode: "",
    Intro: "",
    Wx: "",
    State: "0",
})

const updateUserTag = () => {
    emits("update:personalSignatureFn", state)
}

defineExpose({
    updateUserTag
})

</script>

<style lang="scss" scoped>
.register-title {
    color: #262626;
    font-size: 48rpx;
    margin-top: 80rpx;
    font-weight: 600;
}

.register-tip {
    color: #999;
    font-size: 32rpx;
    margin-top: 20rpx;
}

.van-field {
    padding: 30rpx;
    background: #EEEEEE;
    border-radius: 8rpx;
    margin-top: 30rpx;
}

:deep(.van-field__control) {
    font-size: 28rpx;
    font-weight: 500;
}

.font-number {
    text-align: right;
    font-size: 28rpx;
    color: #666666;
    margin-top: 30rpx;
}
</style>
